<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-form-radio {
            line-height: 30px;
            margin: 0px 10px 0 0;
        }
        .layui-form-radio *{
            font-size:12px !important;
        }
    </style>
</head>

<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">系统管理</a>
            <a>
                <cite>材料列表</cite>
            </a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right;margin-right:10px"
       onclick="window.history.go(-1)" title="后退">
        <i class="iconfontBlod" style="line-height:30px">&#xe74f;</i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">

                </div>
                <div class="layui-card-body tableCardBody">
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/html" id='toolbar'>
    <button class="layui-btn" type="button" lay-event="add" auth='addSpec'>添加规格</button>
</script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var materialId = Number(getQueryString('id'));
        var categoryId = Number(getQueryString('categoryId'));
        var rent = ``
        if(categoryId == 3){
            rent = `<div class="layui-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">采购形式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="isRent" value="0" title="公司自购">
                                <input type="radio" name="isRent" value="1" title="物资租赁">
                            </div>
                        </div>
                    </div>`
        }
        // 异步数据加载
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-120',
            contentType: "application/json; charset=utf-8",
            url: url + '/setting/material/specLists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count": res.data.count
                };
            },
            where: {
                materialId: materialId,
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            page: false, //开启分页
            cols: [
                [ //表头
                    {field: '', title: '编号', type: 'numbers', width: '8%'},
                    {
                        field: 'spec', title: '规格', width: "35%", templet: function (d) {
                            return d.spec
                        }
                    },
                    {field: 'unitName', title: '计量单位', width: '8%'},
                    {
                        field: 'status', title: '状态', width: "6%", templet: function (d) {
                            return d.status === 1 ? '启用' : '停用';
                        }
                    },
                    {
                        field: '', title: '操作', templet(d) {
                            var html =`
                            <button class='layui-btn' lay-event='edit' auth="editSpec">编辑</button>`
                            if(d.status === 1){
                                html+=`<button class='layui-btn' lay-event='status' auth="specStatus">停用</button>`
                            }else{
                                html+=`<button class='layui-btn' lay-event='status' auth="specStatus">启用</button>`
                            }
                            html+=`<button class='layui-btn layui-btn-danger' lay-event='delete' auth="deleteSpec">删除</button>`
                            return html
                        }
                    }
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done: function () {
                permission();
            }
        });
        table.on('toolbar(test)',function(data){
            if (data.event === 'add'){
                layer.open({
                    type: 1,
                    title: "添加规格",
                    area: ['40%', '50%'],
                    content: `
                    <form class="layui-form layerOpen" action="" lay-filter="add">
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">规格名称</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="spec" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">计量单位</label>
                                <div class="layui-input-block">
                                    <select name="unitId" id="unitId" lay-search>${unitSelect()}</select>
                                </div>
                            </div>
                        </div>
                        ${rent}
                    </form>
                `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success:function(){
                        form.render();
                    },
                    yes: function (index, layero) {
                        var spec = $('#spec').val();
                        var unitId = $('#unitId').val();
                        $.ajax({
                            url: url + '/setting/material/addSpec',
                            type: "post",
                            data: {
                                materialId: materialId,
                                unitId: unitId,
                                spec: spec,
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('添加规格', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('添加规格', r);
                                }
                            }
                        })
                    }
                })
            }
        });

        table.on('tool(test)', function (data) {
            if (data.event === 'edit') {
                layer.open({
                    type: 1,
                    title: "编辑",
                    area: ['40%', '50%'],
                    content: `
                        <form class="layui-form layerOpen" action="">
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">规格名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" id="spec" value='${data.data.spec}' autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">计量单位</label>
                                    <div class="layui-input-block">
                                        <select name="unitId" id="unitId" lay-search>${unitSelect()}</select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success:function(){
                        $('#unitId option[value=' + data.data.unitId + ']').attr('selected', 'selected');
                        form.render();
                    },
                    yes: function (index, layero) {
                        var spec = $('#spec').val();
                        var unitId = $('#unitId').val();
                        $.ajax({
                            url: url + '/setting/material/editSpec',
                            type: "post",
                            data: {
                                id: Number(data.data.id),
                                spec: spec,
                                unitId: unitId,
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('编辑规格', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('编辑规格', r);
                                }
                            }
                        })
                    }
                })
            } else if(data.event === 'status'){
                layer.open({
                    type: 0,
                    title: "启用/停用",
                    area: ['40%', '30%'],
                    content: `是否${data.data.status===1?'停用':'启用'} ${data.data.spec}`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + '/setting/material/editSpecStatus',
                            type: "post",
                            data: {
                                id: Number(data.data.id),
                                status:data.data.status===1?0:1,
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('启用/停用', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('启用/停用', r);
                                }
                            }
                        })
                    }
                })
            } else if (data.event === 'delete') {
                layer.open({
                    type: 0,
                    title: "删除材料",
                    area: ['40%', '30%'],
                    content: `是否删除 ${data.data.spec}`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + '/setting/material/deleteSpec',
                            type: "post",
                            data: {
                                id: Number(data.data.id),
                                token: getToken()
                            },
                            dataType: "json",
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('删除规格', r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('删除规格', r);
                                }
                            }
                        })
                    }
                })
            }
        })
    });
</script>

</html>